<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="100">
			<Row class="p-1">
				<Col span="12">
					<FormItem class="" label="案例标题:">
						<Input v-model="sample.title" placeholder="请输入标题名称"></Input>
					</FormItem>

					<FormItem class="" label="分类封面">
						<div class="d-flex flex-row">
							<label class="ivu-input">{{coverFile.name}}</label>
							<label style="line-height: 30px;" class="ivu-btn ivu-btn-default ml-1" for="cover">选择文件</label>
							<input @change="fileChange($event,coverFile)" id="cover" style="display: none;" type="file"></input>
						</div>
						<div class="d-flex flex-row mt-2">
							<img v-if="coverFile.url != ''" class="w-50" :src="coverFile.url" />
						</div>
					</FormItem>
					<FormItem class="" label="案例可用状态:">
						<Select v-model="sample.statu" clearable >
							<Option value="1">激活</Option>
							<Option value="0">禁用</Option>
						</Select>
					</FormItem>
				</Col>
			</Row>
			<Row class="p-1">
				<Col span="24">
					<FormItem class="" label="施工案例详情:">
						<div style="display: block; position: relative; z-index: 0;" id="editor">
						</div>
					</FormItem>
				</Col>
				
				<Col span="12">
					<FormItem class="text-right">
						<Button @click="submit" type="primary">提交</Button>
						<Button @click="cancel" class="ml-2">取消</Button>
					</FormItem>
				</Col>
			</Row>
			
		</Form>
	</Layout>
</template>

<script>
	import E from "wangeditor";
	
	export default {
		data() {
			return {
				sample: {
					title: "",
					contant: "",
					statu: "1",
				},
				coverFile: {
					name: "",
					file: undefined,
					url: ""
				},
				url:"",
				editor: undefined,
				
			}
		},
		methods: {
			fileChange: function(e,imgItem) {
				// this.coverFile.file = e.target.files[0];
				// this.coverFile.name = this.coverFile.file.name;
				// this.coverFile.onProgress = this.onProgress;
				
				imgItem.file = e.target.files[0];
				imgItem.name = imgItem.file.name;
				
				let reader = new FileReader();
				reader.onloadend = function() {
					imgItem.url = this.result;
				}
				reader.readAsDataURL(imgItem.file);
				imgItem.onProgress = this.onProgress;
			},
			onProgress: function(pData) {
				console.log(pData);
			},
			
			submit: function() {
				let self = this;
				
				if (this.sample.title.length === 0) {
					this.message.error("请输入案例标题");
					return;
				}

				if (this.common.isEmptyString(this.coverFile.name)) {
					this.message.warning("请选择封面文件");
					return;
				}
				this.common.submitFile(this.coverFile).then(function(res) {
					self.url = res.Location;
					self.http.post({
						url: "/sample/sample/more",
						param: {
							title:self.sample.title,
							contant:self.editor.txt.html(),
							statu:self.sample.statu,
							url:self.url,
						}
					}).then(data => {
						self.message.info("添加成功");
						self.$tabs.close();
					});
				}).catch(function(err) {
					self.message.error("封面文件上传失败，取消新增案例。");
				});
				
			},
			cancel: function() {
				self.$tabs.close();
			},
			init: function() {	
			}
		},
		created: function(){
			this.init();
		},
		mounted: function() {
			this.editor = new E("#editor");
			let self = this;
			this.editor.config.customUploadImg = this.common.editorUploadFile;
			/* this.editor.config.customUploadVideo = this.common.editorUploadVideo; */
			this.editor.create();
		},
	}
</script>

<style>
</style>
